<template>
  <main class="article-detail">
    <ArticleDetail class="article-content" />
    <div class="btn-group" v-draggable>
      <el-button @click="editArticle()" color="#2f4058">编辑</el-button>
    </div>
  </main>
</template>

<script setup lang="ts">
import ArticleDetail from '@/views/home/article/detail.vue';
import { RouterEnum } from '@/enum';

// 路由参数：文章ID
const route = useRoute();
const router = useRouter();
const articleId = route.query.articleId as string;

// 编辑文章
const editArticle = () => {
  router.push({ name: RouterEnum.ARTICLE_WRITE, query: { articleId } });
};
</script>
<style scoped lang="scss">
.article-detail {
  width: 100%;
  min-height: 100vh;
  background: url('/public/images/bg.jpg') repeat;
  background-size: 100%;
  .article-content {
    user-select: none;
  }
  .btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 50%;
    right: 5rem;
    width: 5rem;
    padding: 1rem;
    background-color: #6b6b6ab9;
    border-radius: 0.5rem;
  }
}
</style>
